<template>
    <div>
        <el-dialog :visible="visible" title="编辑宣传图" width="700px" @close="visible = false">
            <div class="container">
                <div class="banner" v-for="(item,index) in form.banners" :key="index" @click="remove(index)">
                    <img class="banner-img" :src="item">
                    <div class="cover">
                        <i style="display: block; color: white; font-size: 32px;" class="el-icon-delete-solid"></i>
                        <span style="display: block; color: white; font-size: 16px;">删除</span>
                    </div>
                </div>
                <div class="card" @click="addDialog = true">
                    <i class="el-icon-plus"></i>
                </div>
            </div>
            <template #footer>
                <el-button @click="visible = false">取消</el-button>
                <el-button type="primary" @click="submit()">确定</el-button>
            </template>
        </el-dialog>
        <el-dialog :visible="addDialog" title="添加宣传图" width="360px" @close="addDialog = false">
            <div>
                <el-input v-model="url" placeholder="输入宣传图地址"></el-input>
            </div>
            <template #footer>
                <el-button @click="addDialog = false">取消</el-button>
                <el-button type="primary" @click="add()">添加</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { postSync } from '@/util/request'
let _this = null
export default {
    name: 'EditApp',
    data() {
        return {
            visible: false,
            form: {
                id: 0,
                banners: []
            },
            addDialog: false,
            url: ''
        }
    },
    created() {
        _this = this
    },
    methods: {
        show: (id, banners) => {
            _this.visible = true
            _this.form.id = id
            _this.form.banners = banners
        },
        submit: () => {
            _this.visible = false
            postSync('/api/app/editbanners', {
                ..._this.form
            }).then((res) => {
                if (res.code == 200) {
                    _this.$notify({
                        title: '成功',
                        message: '编辑成功',
                        duration: 3000,
                        type: 'success'
                    })
                    _this.$emit('load')
                    _this.form = {
                        id: 0,
                        banners: []
                    }
                }
            })
        },
        remove: (e) => {
            _this.form.banners.splice(e, 1)
        },
        add: () => {
            _this.form.banners.push(_this.url)
            _this.addDialog = false
            _this.url = ''
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .banner {
        position: relative;
        width: 148px;
        height: 236px;
        margin: 8px;

        .cover {
            z-index: 100;
            border-radius: 6px;
            top: 0px;
            width: 148px;
            height: 236px;
            position: absolute;
            background-color: rgba(0, 0, 0, 0.5);
            opacity: 0;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            cursor: pointer;
        }

        .cover:hover {
            transition: all 0.5s;
            opacity: 1;
        }
    }

    .banner-img {
        border-radius: 6px;
        width: 148px;
        height: 236px;
    }

    .card {
        background-color: #fbfdff;
        border: 1px dashed #c0ccda;
        border-radius: 6px;
        box-sizing: border-box;
        width: 148px;
        height: 236px;
        cursor: pointer;
        line-height: 234px;
        text-align: center;
        margin: 8px;
    }

    .card:hover {
        border: 1px dashed #5e9ce3;
    }
}
</style>